<template>
  <view class="containerBox">
		<u-navbar title="搜索中心" @leftClick="toHome" :autoBack="false" :placeholder="true" leftIconColor="#ffffff" :titleStyle="{color: '#ffffff'}" bgColor="#e60000" class="navBarHeight" />
    <view class="header-bg">
      <u-search placeholder="请输入关键词" height="80rpx" v-model="searchValue" :showAction="false" searchIconColor="#e60000" @search="handleSearchConfirm" />
    </view>
    <view class="search-history">
      <view class="header">
        <view class="title">历史记录</view>
        <view class="clear-wrapper" @click="handleClearHistory">
          <uni-icons type="trash"></uni-icons>
          清除记录
        </view>
      </view>
      <view class="history-list">
        <view class="item" v-for="(item, index) of historyList" :key="index" @click="handleHistoryItemClick(item)">{{ item }}</view>
        <view class="w-100">
          <empty text="暂无记录" :show="historyList.length == 0" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
let MaxHistoryNum;
let LocalStorageKey;
export default {
  name: 'SearchPage',
  data() {
    return {
      searchValue: null,
      historyList: [],
      type: null,
    };
  },
  onLoad(options) {
    this.type = options.type;//进入这个页面必须带这个参数
    if(options.type == 'home'){
      MaxHistoryNum = 15;
      LocalStorageKey = 'searchHistory';
    }else if(options.type == 'news'){
      MaxHistoryNum = 20;
      LocalStorageKey = 'searchNewsHistory';
    }
    this.getHistoryList();
  },
  methods: {
    toHome(){
      if(this.type == 'home'){
        uni.switchTab({
          url: '/pages/index/index'
        });
      }else if(this.type == 'news'){
        uni.switchTab({
          url: '/pages/news/index'
        });
      }
    },
    //清除搜索记录
    handleClearHistory() {
      uni.showModal({
        title: '是否清除全部历史搜索记录？',
        success: (e) => {
          if (e.confirm) {
            this.historyList = [];
            uni.setStorageSync(LocalStorageKey, this.historyList);
          }
        },
      });
    },
    // 点击历史搜索记录
    handleHistoryItemClick(name) {
      if(this.type == 'home'){
        uni.navigateTo({
          url: `/pages/product/productList?keyword=${name}`,
        });
      }else if(this.type == 'news'){
        uni.navigateTo({
          url: `/pages/news/searchList?keyword=${name}`,
        });
      }
    },
    // 确认搜索
    handleSearchConfirm() {
      if (!this.searchValue) {
        return;
      }
      this.pushHistoryList(this.searchValue);
      if(this.type == 'home'){
        uni.navigateTo({
          url: `/pages/product/productList?keyword=${this.searchValue}`,
        });
      }else if(this.type == 'news'){
        uni.navigateTo({
          url: `/pages/news/searchList?keyword=${this.searchValue}`,
        });
      }
    },
    //获取搜索记录
    getHistoryList() {
      this.historyList = uni.getStorageSync(LocalStorageKey) || [];
    },
    // 将搜索关键词存入缓存
    pushHistoryList(item) {
      const currentItemIndex = this.historyList.findIndex((ele) => {
        return ele === item;
      });
      if (currentItemIndex !== -1) {
        // 已有对应的搜索记录，不再新增，改为显示在最前面
        this.historyList.splice(currentItemIndex, 1);
        this.historyList.unshift(item);
        uni.setStorageSync(LocalStorageKey, this.historyList);
        return;
      }
      if (this.historyList.length < MaxHistoryNum) {
        this.historyList.unshift(item);
      } else {
        this.historyList.pop();
        this.historyList.unshift(item);
      }
      uni.setStorageSync(LocalStorageKey, this.historyList);
    },
  },
};
</script>

<style lang="scss">
.containerBox{
  background-color: #fff;
  min-height: 100vh;
}
.header-bg {
  padding: 2% 4%;
  box-sizing: border-box;
  .searchInput{
    border-radius: 10rpx;
    font-size: 28rpx;
    background-color: rgb(239, 239, 239);
    display: block;
    height: 70rpx;
    line-height: 70rpx;
  }
}
.search-history {
  padding: 30rpx 30rpx 10rpx;
}
.header {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  .title {
    font-size: 34rpx;
  }
  .clear-wrapper {
    font-size: 24rpx;
  }
}
.history-list {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  margin-top: 30rpx;
  .item {
    padding: 4rpx 36rpx;
    background: #f6f4f5;
    border-radius: 20rpx;
    font-size: 28rpx;
    margin: 20rpx 20rpx 0 0;
  }
}
</style>
